<template>
    <el-card>
        <!-- 商品列表 -->
        <div slot="header">
            <span>商品列表</span>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <!-- 详情栏 -->
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline-block class="demo-table-expand">
                        <el-form-item label="商品ID">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="商品名称">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="所属分类">
                            <span>{{ props.row.category }}</span>
                        </el-form-item>
                        <el-form-item label="商品价格">
                            <span>{{ props.row.price }}</span>
                        </el-form-item>
                        <el-form-item label="商品图片">
                            <img :src="props.row.imgUrl" width="120px">
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <span>{{ props.row.ctime | formater }}</span>
                        </el-form-item>
                        <el-form-item label="商品评价">
                            <span>{{ props.row.rating }}</span>
                        </el-form-item>
                        <el-form-item label="商品销量">
                            <span>{{ props.row.sellCount }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <!-- 商品名称 -->
            <el-table-column label="商品名称" width="150" prop="name">
            </el-table-column>
            <!-- 所属分类 -->
            <el-table-column label="所属分类" width="150" prop="category">
            </el-table-column>
            <!-- 商品价格 -->
            <el-table-column label="商品价格" width="100" prop="price">
            </el-table-column>
            <!-- 商品图片 -->
            <el-table-column label="商品图片" width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.imgUrl" width="100px">
                </template>
            </el-table-column>
            <!-- 商品描述 -->
            <el-table-column label="商品描述" width="200" prop="goodsDesc">
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-sizes="[3, 5, 8, 10]"
            :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>
</template>
<script>
import { goodsList, goodsDel } from '@/api/goods.js'
export default {
    data () {
        return {
            tableData: [],
            currentPage: 1,//当前显示在第几页
            pageSize: 5,//每页显示多少条
            total: 0,//数据总条数

            flag: false, //控制修改账号的弹出框是否显示

            form: {
                account: '',
                userGroup: '',
            },
            
        }
    },
    methods: {
        edit (row) {
            this.$router.push('/goods/edit?row=' + JSON.stringify(row))
        },

        //保存修改后的数据
        saveEdit () {
            this.$refs.form.validate(async result => {
                if (result) {
                    let res = await userEdit(this.form);
                    if (res.data.code === 0) {
                        this.flag = false;
                    }
                };
            })

        },
        //删除商品
        del (row) {
            setTimeout(async () => {
                let res = await goodsDel({ id: row.id })
                if (res.data.code === 0) {
                    this.getData();
                }
            }, 500)

        },
        //每一页显示条数,改变时触发
        sizeChange (val) {
            this.pageSize = val
            this.getData()
        },
        //当前页码改变时触发
        currentChange (val) {
            this.currentPage = val
            this.getData()
        },
        // 获取数据 渲染到页面
        async getData () {
            //读取用户列表数据
            let res = await goodsList({ currentPage: this.currentPage, pageSize: this.pageSize })
            this.tableData = res.data.data//渲染表格
            //分页
            this.total = res.data.total
        }
    },
    async created () {
        this.getData()
    },

}
</script>